】
<template>
  <h1 style="text-align: center">通知简讯</h1>

  <el-divider />

  <el-col :span="20" :offset="2">
    <!-- 通知列表 -->
    <div style="min-height: 500px">
      <el-card
        v-for="notice in paginatedNotices"
        :key="notice.id"
        class="text-card"
        shadow="hover"
        style="margin-bottom: 20px"
      >
        <el-row>
          <!-- 标题 -->
          <el-col :span="18">
            <div style="font-weight: bold; font-size: 20px">
              {{ notice.title }}
            </div>
          </el-col>

          <!-- 时间标签 -->
          <el-col :span="6" style="text-align: right">
            <el-tag>
              {{ new Date(notice.created_at).toLocaleDateString() }}
            </el-tag>
          </el-col>

          <!-- 简要描述 -->
          <el-col :span="21" style="margin-top: 10px">
            {{ notice.summary || "暂无简介" }}
          </el-col>

          <!-- 查看详情按钮 -->
          <el-col :span="3" style="position: relative">
            <el-button
              size="small"
              type="warning"
              text
              class="my-btn"
              @click="
                () =>
                  $router.push({
                    name: 'NoticeDetail',
                    params: { id: notice.id },
                  })
              "
            >
              查看详情
            </el-button>
          </el-col>
        </el-row>
      </el-card>

      <!-- 当无数据时 -->
      <el-empty
        v-if="!paginatedNotices.length"
        description="暂无通知"
      ></el-empty>
    </div>

    <!-- 分页控件 -->
    <div style="text-align: center; margin-top: 20px">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="notices.length"
        :page-size="pageSize"
        v-model:current-page="currentPage"
      />
    </div>
  </el-col>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import api from "@/utils/api";

const notices = ref([]); // 所有通知
const currentPage = ref(1); // 当前页码
const pageSize = ref(6); // 每页数量

// 获取当前页的通知数据（分页）
const paginatedNotices = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return notices.value.slice(start, end);
});

// 从后端获取通知
const fetchNotices = async () => {
  try {
    const res = await api.get("/notices");
    if (res.data.code === 200) {
      notices.value = res.data.data.sort(
        (a, b) => new Date(b.created_at) - new Date(a.created_at)
      ); // 按时间倒序
    }
  } catch (err) {
    console.error("获取通知失败:", err.response?.data || err.message);
  }
};

onMounted(fetchNotices);
</script>

<style scoped>
.text-card {
  border-radius: 20px;
  border-top: none;
  margin-bottom: 5px;
  padding-bottom: 10px;
}

.my-btn {
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.el-pagination {
  justify-content: center;
}
</style>
